<template>
    <div class="additionalLoan">
        <Alert type="success">附加金额</Alert>
        <Form ref="additionalLoanForm" :model="additionalLoanForm" :rules="additionalLoanFormValiate" :label-width="100">
            <div class="common_content" style="padding:0px">
                 <Row style="min-height: 300px;">
                     <Col>
                        <common-finance
                            :isShowDetails="isShowDetails"
                            :isDisabled="isDisabled"
                            :financeForm="additionalLoanForm"
                            :isAdditional="isAdditional"
                            :isSubProduct="isSubProduct"
                            :selectProductInfo="selectProductInfo"
                            :financeFormValiate="additionalLoanFormValiate"
                            :queryProductInfo="queryProductInfo"
                        ></common-finance>
                    </Col>
                    <common-ele-loan
                    :loanForm="additionalLoanForm"
                    :loanFormOld="carAdditioalLoanFormOld"
                    :isShowDetails="isShowDetails"
                    :loanFormValiate="additionalLoanFormValiate"
                    :selectProdInfo="selectProductInfo"
                    :queryProdInfo="queryProductInfo"
                    :monthPay="addMonthPay"
                    :discount="addDiscount"
                    :interest="addTotalInterest"
                    :applyNo="applyNo"
                    :uuid="uuid"
                    :isAppear="isAppear"
                    :isTail="isAdditionalTail"
                    :prodId="mainProductId"
                    :isDisabled="isDisabled"
                    @validateSingle="validateSingle"
                    @isChange="isChange"
                    :discountOption="additionalDiscountOption"
                    ref="additionalEle"
                    :diver="diverType"
                     ></common-ele-loan>
                </Row>
            </div>
        </Form>
    </div>
</template>
<script>
import {
    queryProductDetails,
} from "_p/afs-apply/api/apply-report/personal/financialProducts.js"
import {prodRes1} from "@/projects/afs-apply/assets/js/staticData.js"
import {deepClone} from "@/libs/utils/ObjectClone";
import vueEvent from "_p/afs-apply/assets/js/vueEvent.js"
import {
    multiply,
    divided
} from "_p/afs-apply/assets/js/utils.js"
import CommonEleLoan from "../common-ele-loan/commonEleLoan.vue"
import * as utils from '_p/afs-apply/assets/js/utils.js'
import CommonFinance from "../common-finance/common-finance"
export default {
    name:"additionalLoan",
    data(){
        return{
            diverType:"additional",
            additionalLoanForm:{
                additionalTotalAmt:"",
                //项目融资列表
                additionalAmtList:[
                ],
                loanLimit:0,
                downPayScale:"",
                downPayAmt:"",
                tailPayScale:"",
                tailPayAmt:"",
                loanAmt:"",
                custRate:"",
                monthPayAmt:"",
                totalInterest:"",
                maxDisCountAmt:"",
                discountType:"",
                discountTotalAmt:"",
                payRate:"",
                loadList:[
                ],
                settleRate:"",
            },
            //留痕
            carAdditioalLoanFormOld:{
                carPrice:"",
                additionalTotalAmt:"",
                //项目融资列表
                additionalAmtList:[
                ],
                loanLimit:0,
                downPayScale:"",
                downPayAmt:"",
                tailPayScale:"",
                tailPayAmt:"",
                loanAmt:"",
                custRate:"",
                monthPayAmt:"",
                totalInterest:"",
                /* maxDisCountAmt:"",*/
                discountType:"",
                /* discountTotalAmt:"",*/
                payRate:"",
            },
            additionalLoanFormValiate:{
                downPayScale:[]
            },
            decorateModel:false,//装潢产品的弹窗
            decorateForm:{
                prodName:"",
                checkedDecorProd:[],
            },
            totalDecorList:[

            ],
        }
    },
    props:{
        selectProductInfo:{
            type:Object,
        },
        queryProductInfo:{
            type:Object,
        },
        additionalDiscountOption:{
            type:String,
        },
        uuid:{
            type:String,
        },
        isAppear: {
            type: Boolean
        },
        isShowDetails:{
            type:Boolean,
        },
        isAdditional:{
            type:String
        },
        isSubProduct:{
            type:String
        },
        addProductId:{
            type:String,
        },
        mainProductId:{
            type:String,
        },
        applyNo:{
            type:String,
        },
        isAdditionalTail:{
            type:Boolean
        },
        isDisabled:{
            type:Boolean
        },
        // totalInfoData:{
        //     type:Object,
        // },
        addMonthPay:{
            type:Number
        },
        addDiscount:{
            type:Number
        },
        addTotalInterest:{
            type:Number
        }
    },
    components:{
        CommonFinance,
        CommonEleLoan
    },
    watch:{
        queryProductInfo(val){
            if(Object.keys(val).length>0){
                this.additionalLoanForm.additionalTotalAmt=val.costInfo.contractAmt.toString();
            }
            if(val.costInfoOld){
                this.carAdditioalLoanFormOld=val.costInfoOld
            }else{
                this.carAdditioalLoanFormOld=val.costInfo
            }
        },
        'additionalLoanForm.loanAmt':{
            handler(val){
                vueEvent.$emit('to-additionalLoanAmt',val,this.uuid);
            }
        },
        'additionalLoanForm.downPayAmt':{
            handler(val){
                vueEvent.$emit('to-additionalDownPayAmt',val,this.uuid);
            }
        },
        'additionalLoanForm.additionalTotalAmt':function(val){
            this.inputPrice()
            vueEvent.$emit('to-additionalPrice',val,this.uuid);
        },
    },

    creatd(){
    },
    mounted(){
        let self=this;
        vueEvent.$on('to-caluateAddAmt',function(addAmt,id,operFlag){
            if(id==self.uuid){
               self.additionalLoanForm.loanAmt=addAmt;
               self.$refs.additionalEle.inputLoanAmt(addAmt,operFlag);
            }
        })
    },
    beforeDestroy () {
        vueEvent.$off("to-caluateAddAmt");
    },
    methods:{
        isChange(val){
            this.$emit('isChange',val);
        },
        isDeal() {
            this.$refs.additionalEle.isDeal();
        },
        validateSingle(type){
            this.$refs.additionalLoanForm.validateField(type);
        },
         // 输入附加金额
        inputPrice(){
            if(utils.isTwoDicmal(this.additionalLoanForm.additionalTotalAmt)){
                if(this.additionalLoanForm.downPayScale){
                    this.$refs.additionalEle.inputPayScale('downPayScale')
                }
                if(this.additionalLoanForm.tailPayScale){
                    this.$refs.additionalEle.inputPayScale('tailPayScale')
                }
            }
        },
        submitAdditionalLoan(){
            let addValiate=false;
            this.$refs.additionalLoanForm.validate((valid) => {
                if(valid){
                    addValiate=valid;
                }else{
                    addValiate=false;
                }
            })
            if(addValiate){
                 return this.additionalLoanForm
            }else{
                return false;
            }
        }
    }
}
</script>
<style scoped>
.w400{
    width:400px;
}
.addLoan{
    margin-left: 10px;
    position: absolute;
    top: 4px;
    right: 0px;
}
.arrow_icon{
    line-height: 24px;
}
.arrow_icon>span{
    position: absolute;
    right: 9px;
    top: 2px;
    cursor: pointer;
}
.addLoan i, .amt_list_type i,.itemamt_list_type i{
    width: 20px;
    height: 20px;
    background:#EB9620;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    line-height: 15px;
    text-align: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
}
.amt_list_type i{
    position: absolute;
    top: 6px;
    right: 0;
}
.term span{
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    margin-left: 5px;
    text-align: center;
    cursor: pointer;
}
.term span>i{
    font-style: normal;
    height: 20px;
    width: 20px;
    display: inline-block;
}
.term span.active>i,.term span>i:hover{
    background: #0D8EF5;
    color: white;
}
.decorateProd>h2{
    font-weight: normal;
    text-align: center;
}
.decorateProd label{
    display: block;
}
.additionalLoan .ivu-col{
    width: 33.3%;
    float: left;
}
</style>
